<template>
  <el-row :gutter="20">
    <!-- 模块搜索 -->
    <el-col :span="6" :xs="24">
      <div>
        <el-input
          v-model="nodeName"
          placeholder="请输入过滤条件"
          clearable
          prefix-icon="Search"
        />
      </div>
      <div>
        <el-tree
          ref="testCaseRef"
          class="tree-border"
          :data="treeOptions"
          :props="{ label: 'name', children: 'children' }"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          node-key="id"
          highlight-current
          default-expand-all
          empty-text="加载中，请稍候"
          @node-click="handleNodeClick"
        >
          <!-- 添加自定义节点内容 -->
          <template #default="{ node, data }">
            <svg-icon :icon-class="getNodeIconClass(data)" />
            <span class="el-tree-node__label">{{ node.label }}</span>
          </template>
        </el-tree>
      </div>
    </el-col>
    <el-col :span="18" :xs="24">
      <div v-if="nodeType == 'TestCase'">
        <el-card>
          <div class="card-header">
            <h4>
              <strong>基本信息</strong>
            </h4>
          </div>
          <div class="card-body">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="用例编号">{{
                form.number
              }}</el-descriptions-item>
              <el-descriptions-item label="用例名称">{{
                form.name
              }}</el-descriptions-item>
              <el-descriptions-item label="所属产品">
                <router-link
                  v-if="form.product"
                  :to="'/pms/product-info/index/' + form.product.value"
                  class="link-type"
                >
                  <span>{{ form.product.label }}</span>
                </router-link>
              </el-descriptions-item>
              <el-descriptions-item label="所属模块">
                <router-link
                  v-if="form.module"
                  :to="'/pms/module-info/index/' + form.module.value"
                  class="link-type"
                >
                  <span>{{ form.module.label }}</span>
                </router-link>
              </el-descriptions-item>
              <el-descriptions-item label="用例类型">
                <y-dict-tag :options="tms_tc_type" :value="form.type" />
              </el-descriptions-item>
              <el-descriptions-item label="用例级别">
                <y-dict-tag :options="tms_tc_level" :value="form.level" />
              </el-descriptions-item>
              <el-descriptions-item label="适用阶段">
                <y-dict-tag :options="tms_tc_stage" :value="form.stage" />
              </el-descriptions-item>
              <el-descriptions-item label="是否可自动化">
                <y-dict-tag :options="sys_yes_no" :value="form.isauto" />
              </el-descriptions-item>
              <el-descriptions-item label="创建人">{{
                form.creator_name
              }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{
                form.create_time
              }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <y-dict-tag
                  :options="sys_enable_disable"
                  :value="form.status"
                />
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
        <br />
        <el-card>
          <steps-info :form="form" />
        </el-card>
        <br />
        <el-card>
          <div class="card-header">
            <h4>
              <strong>关联信息</strong>
            </h4>
          </div>
          <div class="card-body">
            <el-descriptions direction="vertical" :column="1" border>
              <el-descriptions-item label="关联需求">
                <router-link
                  v-for="(item, index) in form.reqs"
                  :to="'/pms/requirement-info/index/' + item.value"
                  class="link-type"
                >
                  <span>{{ index + 1 }}.{{ item.label }}</span>
                  <br />
                </router-link>
              </el-descriptions-item>
              <el-descriptions-item label="关联缺陷" :span="2">
                <router-link
                  v-for="(item, index) in form.bug_set"
                  :to="'/tms/bug-info/index/' + item.value"
                  class="link-type"
                >
                  <span>{{ index + 1 }}.{{ item.label }}</span>
                  <br />
                </router-link>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </div>
      <div v-else>
        <el-card>
          <div class="card-header">
            <h4>
              <strong>基本信息</strong>
            </h4>
          </div>
          <div class="card-body">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="模块编号">{{
                form.number
              }}</el-descriptions-item>
              <el-descriptions-item label="模块名称">{{
                form.name
              }}</el-descriptions-item>
              <el-descriptions-item label="所属产品">
                <router-link
                  v-if="form.product"
                  :to="'/pms/product-info/index/' + form.product.value"
                  class="link-type"
                >
                  <span>{{ form.product.label }}</span>
                </router-link>
              </el-descriptions-item>
              <el-descriptions-item label="父模块">
                <router-link
                  v-if="form.parent"
                  :to="'/pms/module-info/index/' + form.parent.value"
                  class="link-type"
                >
                  <span>{{ form.parent.label }}</span>
                </router-link>
              </el-descriptions-item>
              <el-descriptions-item label="创建人">{{
                form.creator_name
              }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{
                form.create_time
              }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <y-dict-tag
                  :options="sys_enable_disable"
                  :value="form.status"
                />
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
        <br />
        <cases-card ref="casesCardRef" :module="module"></cases-card>
      </div>
      <br />
      <el-card>
        <div class="card-header">
          <h4>
            <strong>备注信息</strong>
          </h4>
        </div>
        <div class="card-body">
          <div v-html="form.remark"></div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { getModule, treeselect } from "@/api/pms/module";
import { getTestCase } from "@/api/tms/testcase";
import StepsInfo from "@/views/tms/testcase/components/StepsInfo";
import CasesCard from "@/views/tms/testcase/components/CasesCard";

const route = useRoute();
const { proxy } = getCurrentInstance();

const {
  sys_enable_disable,
  tms_tc_type,
  tms_tc_level,
  tms_tc_stage,
  sys_yes_no,
} = proxy.useDict(
  "sys_enable_disable",
  "tms_tc_type",
  "tms_tc_level",
  "tms_tc_stage",
  "sys_yes_no"
);

const form = ref({});
const nodeName = ref("");
const nodeType = ref("Module");
const treeOptions = ref([]);
const module = ref(undefined);

/** 通过条件过滤节点 */
const filterNode = (value, data) => !value || data.name.includes(value);

/** 根据名称筛选模块树 */
watch(nodeName, (val) => {
  proxy.$refs.testCaseRef.filter(val);
});

/** 查询模块下拉树结构 */
async function getCasesTreeNode() {
  try {
    const response = await treeselect({
      product: route.params.id,
      showcase: true,
    });
    treeOptions.value = response.data;
    if (treeOptions.value.length > 0) {
      handleNodeClick(treeOptions.value[0]);
    }
  } catch (error) {
    console.error("Failed to fetch tree node:", error);
  }
}

/** 节点单击事件 */
async function handleNodeClick(data) {
  nodeType.value = data.type;
  try {
    const res =
      data.type === "TestCase"
        ? await getTestCase(data.id)
        : await getModule(data.id);
    form.value = res.data;
    if (data.type === "Module") {
      module.value = data.id;
    }
  } catch (error) {
    console.error(`Failed to fetch ${data.type}:`, error);
  }
}

function getNodeIconClass(data) {
  return data.type === "TestCase" ? "testcase" : "folder";
}

onMounted(getCasesTreeNode);
</script>
